<template>
	<div>
		<div class="am-g">
			<!-- LOGO -->
			<div class="am-u-sm-12 am-text-center"><i class="am-icon-twitch myapp-login-logo"></i></div>
			<!-- 注册框 -->
			<div class="am-u-sm-11 am-u-sm-centered">
				<!-- .prevent 事件的修饰符，这个是阻止表单提交-->
				<form class="am-form" action="" method="post" v-on:submit.prevent="registerAct" style="margin-bottom: 20px;">
					<fieldset class="myapp-login-form am-form-set">
						<div class="am-form-group am-form-icon">
							<i class="am-icon-user"></i>
							<input type="text" v-model="user" class="myapp-login-input-text am-form-field" placeholder="请输入账号" required />
						</div>
						<div class="am-form-group am-form-icon">
							<i class="am-icon-lock"></i>
							<input type="password" v-model="pwd" class="myapp-login-input-text am-form-field" placeholder="请输入密码(至少6个字符)" required />
						</div>
						<div class="am-form-group am-form-icon">
							<i class="am-icon-lock"></i>
							<input type="password" v-model="pwd2" @blur="reg" class="myapp-login-input-text am-form-field" placeholder="请再次输入密码" required />
						</div>
					</fieldset>
					<button type="submit" class="am-btn am-btn-secondary am-btn-block am-round" :disabled="baseState == true">注 册</button>
				</form>
				<div class="am-text-center am-u-sm-11 am-u-sm-centered myapp-login-form-shortcut">
					<hr class="myapp-login-form-hr" />
					<span class="myapp-login-form-hr-font">已有账号？</span>
				</div>
				<button type="button" class="am-btn am-btn-warning am-btn-block am-round"><router-link to="/login"><span>登 录</span></router-link></button>
				
			</div>
			
		</div>
	</div>
</template>

<script>
export default {
	name: 'register',
	components: {}, // 再加 子组件
	data() {
		return {
			user: '', // 变量必须加初始值
			pwd: '',
			pwd2: ''
		};
	},
	// 方法
	created() {},
	mounted() {
		// 插件调用代码，自己写的脚本代码
	},
	// 计算属性
	computed: {
		// 写函数
		baseState() {
			//当用户名和密码框都不为空时btnState==true,利用这个计算属性来动态控制按钮的禁用和颜色
			return this.pwd != this.pwd2;
		}
	},
	methods: {
		// 写事件函数
		registerAct() {
			// 提交数据（组件不写异步操作）
			let register = {
				user: this.$data.user,
				pwd: this.pwd,
				router: this.$router, // vue的路由对象
				alert: this.$alert
			};
			// console.log(login)
			// 这里是调用控制器的方法，去写业务判断
			// 这句，是调用中间件 my.js 的方法
			this.$store.dispatch('actRegister', register);
		},
		reg() {
			if (this.pwd != this.pwd2) {
				alert('密码不一致');
				return false;
			}
		}
	}
};
</script>

<style>
.am-btn {
	font-size: 0.7rem;
}
span{
		color: white!important;
	}
</style>
